<template>
  <rx-dialog @handOk="handleSubmit" @cancel="cancel">
    <rx-layout>
      <div slot="center">
        <a-form-model ref="form" :model="mdl" :rules="rules">
          <a-row>
            <a-col :span="12">
              <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.name','名称')" prop="name">
                <a-input :placeholder="i18n('form.name','名称')" v-model="mdl.name" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.alias','别名')" prop="alias">
                <a-input :placeholder="i18n('form.alias','别名')" v-model="mdl.alias" />
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="24">
              <a-form-model-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('form.category','分类')" prop="categoryId">
                <rx-category-select cat-key="FORM" style="width: 43%;" :readKey="id?'edit':'add'" :isGrant="true"
                                    v-if="isShowManageTree" :isAdmin="isManageToTree"
                                    height="150px" v-model="mdl.categoryId">
                </rx-category-select>
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="24">
              <a-form-model-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('form.component','组件')" prop="component">
                <a-input :placeholder="i18n('form.component','组件')" v-model="mdl.component" :rows="4" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
          <out-side-url-form-params-edit ref="urlParm"
                                         :urlParamData="urlParams"></out-side-url-form-params-edit>
      </div>
    </rx-layout>
  </rx-dialog>
</template>

<script>
    import {BaseFormModel,RxDialog} from "@lowcode/jpaas-common-lib";
    import FormPcApi from '@/api/form/core/formPc';
    import OutSideUrlFormParamsEdit from "@/views/modules/form/core/OutSideUrlFormParamsEdit.vue";
    export default {
        name: "form-pc-custom-edit",
        components: {OutSideUrlFormParamsEdit},
        mixins:[BaseFormModel],
        props: ["id"],
        data(){
            return {
              type:"SEL-DEV",
              deployed:"1",
              version:"1",
              main:"1",
              appId: this.$parent.curApp.appId,
              rules:{
                  name: [{ required:true,message: this.i18n('form.name','名称','input'), trigger: 'change' }],
                  alias: [{ required:true,message: this.i18n('form.alias','别名','input'), trigger: 'change' }],
                  categoryId: [{ required:true,message: this.i18n('form.category','分类','select'), trigger: 'change' }],
                  component:[{ required:true,message: this.i18n('form.component','组件','input'), trigger: 'change' }]
              },
              urlParams: [],
            }
        },
      created(){
          this.isUserManager(this.$route.query.appId);
          if(this.id){
            this.getById();
          }
      },
        methods:{
          i18n(name,text,key){
              return this.$ti18(name,text,"formPc",key);
          },
          getById(){
            var self_=this;
            FormPcApi.get(this.id).then(res => {
              if (res.success) {
                self_.mdl = Object.assign(res.data);
                if (res.data.urlParams) {
                      self_.urlParams = JSON.parse(res.data.urlParams);
                }
              }
            })
          },
            save(data){
              data.appId = this.appId;

              var urlParm = this.$refs.urlParm;
              var urlParamList = urlParm.getData();
              if (urlParamList && urlParamList.length > 0) {
                data.urlParams = JSON.stringify(urlParamList);
              }

              if(!data.id){
                data.type="SEL-DEV";
                data.deployed="1";
                data.version="1";
                data.main="1";
              }
              return FormPcApi.save(data);
            }

        }
    }
</script>

<style scoped>

</style>